<template>
  <div class="app-car-container">
    <CustomContent>
      <template v-slot:body>
        <el-form ref="form" :model="form" label-width="80px">
          <el-row>
            <el-col :sm="24" :md="24" :lg="20">
              <MmvTitle title="基本信息"></MmvTitle>
            </el-col>
            <el-col :sm="24" :md="24" :lg="20" class="table-padding">
              <el-descriptions
                :column="2"
                border
                :labelStyle="{ width: '120px' }"
              >
                <el-descriptions-item label-class-name="my-descriptions-label" >
                  <template slot="label">昵称</template>
                  {{ form.vxName }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label" >
                  <template slot="label">客户名称</template>
                  {{ form.memberName }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label" >
                  <template slot="label">手机号</template>
                  {{ form.memberPhone }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label" >
                  <template slot="label">注册时间</template>
                  {{ form.registerTime }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label" >
                  <template slot="label">直接下级数量</template>
                  {{ form.directSubordinates }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label" >
                  <template slot="label">间接下级数量</template>
                  {{ form.indirectSubordinates }}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
            <el-col :sm="24" :md="24" :lg="20">
              <MmvTitle title="下级会员"></MmvTitle>
            </el-col>
            <el-col :sm="24" :md="24" :lg="20" class="table-padding">
              <el-table
                v-loading="loading"
                :data="handleMemberList"
                height="300px"
                border
              >
                <el-table-column
                  label="客户名称"
                  align="center"
                  min-width="120"
                  show-overflow-tooltip
                  prop="memberName"
                />
                <el-table-column label="昵称" align="center" prop="vxName" />
                <el-table-column
                  label="联系方式"
                  align="center"
                  min-width="120"
                  show-overflow-tooltip
                  prop="memberPhone"
                />
                <el-table-column
                  label="总消费金额(元)"
                  align="center"
                  min-width="120"
                  show-overflow-tooltip
                  prop="amount"
                />
                <el-table-column
                  label="注册时间"
                  align="center"
                  min-width="160"
                  show-overflow-tooltip
                  prop="registerTime"
                />
                <el-table-column
                  label="级别"
                  align="center"
                  min-width="120"
                  show-overflow-tooltip
                  prop="inviterLevel"
                  :formatter="inviterLevelChannel"
                />
              </el-table>

              <pagination
                :total="totalMember"
                :page.sync="memberParams.pageNum"
                :limit.sync="memberParams.pageSize"
                @pagination="memberList"
                :pager-count="5"
              />
            </el-col>
            <el-col :sm="24" :md="24" :lg="20">
              <MmvTitle title="下级分销伙伴"></MmvTitle>
            </el-col>
            <el-col :sm="24" :md="24" :lg="20" class="table-padding">
              <el-table
                v-loading="loading"
                :data="handlePartnerList"
                height="300px"
                border
              >
                <el-table-column
                  label="客户名称"
                  align="center"
                  min-width="120"
                  show-overflow-tooltip
                  prop="memberName"
                />
                <el-table-column
                  label="昵称"
                  align="center"
                  min-width="120"
                  show-overflow-tooltip
                  prop="vxName"
                />
                <el-table-column
                  label="联系方式"
                  align="center"
                  min-width="120"
                  show-overflow-tooltip
                  prop="memberPhone"
                />
                <el-table-column
                  label="总消费金额(元)"
                  align="center"
                  min-width="120"
                  show-overflow-tooltip
                  prop="amount"
                />
                <el-table-column
                  label="注册时间"
                  align="center"
                  min-width="160"
                  show-overflow-tooltip
                  prop="registerTime"
                />
                <el-table-column
                  label="级别"
                  align="center"
                  min-width="120"
                  show-overflow-tooltip
                  prop="inviterLevel"
                  :formatter="inviterLevelChannel"
                />
              </el-table>

              <pagination
                :total="totalMember"
                :page.sync="memberParams.pageNum"
                :limit.sync="memberParams.pageSize"
                @pagination="memberList"
                :pager-count="5"
              />
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template v-slot:footer>
        <div class="footer">
          <el-button type="info" plain @click.native="close">取消</el-button>
        </div>
      </template>
    </CustomContent>
  </div>
</template>

<script>
import { getBasic, listMember, listPartner } from '@/api/marketing/customer'
import MmvTitle from '@/components/MmvUI/MmvTitle.vue'
import CustomContent from '@/components/custom/content.vue'
export default {
  name: 'carsave',
  dicts: [],
  components: {
    MmvTitle,
    CustomContent,
  },
  data() {
    return {
      loading: true,
      returnsDetailedList: [],
      totalPartner: 0,
      //会员
      memberParams: {
        pageNum: 1,
        pageSize: 10,
        memberNo: null,
      },
      //提现明细
      withdrawalRecordList: [],
      //会员明细
      handleMemberList: [],
      //伙伴明细
      handlePartnerList: [],
      //伙伴
      partnerParams: {
        pageNum: 1,
        pageSize: 10,
        memberNo: null,
      },
      totalMember: 0,
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      subordinateTable: 'first',
    }
  },
  created() {
    this.handleSubordinate()
  },
  methods: {
    /** 查看下级按钮操作 */
    handleSubordinate() {
      let id = this.$route.query.id
      let directSubordinates = this.$route.query.directSubordinates
      let indirectSubordinates = this.$route.query.indirectSubordinates
      getBasic(id).then((response) => {
        this.form = response.data
        this.form.directSubordinates = directSubordinates
        this.form.indirectSubordinates = indirectSubordinates
        this.memberParams.memberNo = id
        this.memberList()
        this.partnerParams.memberNo = id
        this.partnerList()
      })
    },
    //下级会员
    memberList() {
      this.loading = true
      listMember(this.memberParams).then((response) => {
        this.handleMemberList = response.rows
        this.totalMember = response.total
        this.loading = false
      })
    },
    //下级伙伴
    partnerList() {
      this.loading = true
      listPartner(this.partnerParams).then((response) => {
        this.handlePartnerList = response.rows
        this.totalPartner = response.total
        this.loading = false
      })
    },
    close() {
      // 关闭页面
      this.$router.go(-1)
      this.$store.dispatch('tagsView/delView', this.$route)
    },
    inviterLevelChannel(row, column) {
      switch (row.inviterLevel) {
        case 1:
          return '直接下级'
          break
        case 2:
          return '间接下级'
          break
        default:
          return '--'
          break
      }
    },
  },
}
</script>
